<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>评价页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <style>
        body{ background-color: #fff; }
        article.am-paragraph-default{ margin-top: 10px; }
        article p { margin: 0 !important; padding: 10px; color: #666666; text-align: center; }
        .am-paragraph-default img{ border: none; }
        article h2.am-text-lg{ margin: 10px; text-align: left}
        img.bigImg{ display: block;  margin-top: 10px; margin-bottom: 0; width: 35%;}
        .am-paragraph-default p{ font-size: 1.6rem; }
        p{padding: 0 !important;}
        .ts{color: #000000;font-size: 2.0rem !important;padding: 10px 0 !important}
        .tbb{color: #000000;}
        .am-list-news-hd{height: 20px;}
        .am-list-news-hd h2, .am-list-news-hd .am-list-news-more, .am-list-news-hd h2 em, .detail-next p span{font-size:1.4rem}
        .art-part{ text-align: center; border: 1px solid #ccc; padding: 10px 0; margin: 0 30px; ;}
        .art-part h2{ margin-bottom: 5px; color: #333333; }
        .down{ width: 100%; text-align: center; }
        article h2.am-text-lg{ margin-left: 0; margin-right: 0 }
        .am-with-topbar-fixed-bottom {
            padding-bottom: 20px;
        }

        @font-face{
            font-family: 'icomoon';
            src:url('../assets/fonts/icomoon.eot');                                       /* IE9*/
            src:url('../assets/fonts/icomoon.eot?#iefix') format('embedded-opentype'),    /* IE6-IE8 */
            url('../assets/fonts/icomoon.woff') format('woff'),      /* chrome、firefox */
            url('../assets/fonts/icomoon.ttf') format('truetype'),   /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('../assets/fonts/icomoon.svg#iconfont') format('svg');  /* iOS 4.1- */
            font-weight: normal;
            font-style: normal;
        }
        .ui-fonts{
            font-family: 'icomoon';
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            font-size: 22px;
            color: #999999;
            margin-right: 5px;
        }

        .icon-un{
            color: #EEA415;
        }
    </style>
</head>
<body class="am-with-topbar-fixed-bottom">
<!-- Start kuaikuai-tab -->
<section id="kuaikuai-tab">
    <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
        <!-- 添加 am-topbar-fixed-top -->
        <ul class="am-tabs-nav tabs-nav am-cf">
            <li class="am-active">
                <a data-kuai-tabs="0">服务保障</a>
            </li>
            <li >
                <a data-kuai-tabs="1">用户评价</a>
            </li>
        </ul>
        <div class="am-tabs-bd" id="ok" style="border: none">
            <!-- Start 服务保障 -->
            <div class="am-tab-panel am-active" data="tab1">
                <section class="am-list-news-hd am-cf" style="background-color: #eeeeee;">

                </section>
                <article data-am-widget="paragraph" class="am-paragraph am-paragraph-default">
                    <h2 class="am-text-lg">洗车美容</h2>
                    <p style="text-align: left;">最大的汽车美容O2O平台，为车主筛选有品质的服务商统一定价，并提供方便的上门取送到店洗车服务。</p>
                    <section style="margin-bottom: 20px;">
                        <img class="bigImg" src="../assets/i/icon/show01.png" alt=""/>
                        <p class="ts">更专业</p>
                        <p>4S店顾问面对面培训车管家汽车美容知识与礼仪，
                            5年以上驾龄录用，每一位车管家都要经过多重考核，
                            才能持证上岗。</p>
                    </section>
                    <section style="margin-bottom: 20px;">
                        <img class="bigImg" src="../assets/i/icon/show02.png" alt=""/>
                        <p class="ts">更省心</p>
                        <p>从上门取车到送还车辆，全程安全保障。针对交通事故车险、人险投保平安保险200万全保，出险优先处理，先行赔付，合理方案解决维修期间出行用车。</p>
                    </section>
                    <section style="margin-bottom: 20px;">
                        <img class="bigImg" src="../assets/i/icon/show04.png" alt=""/>
                        <p class="ts">更优质</p>
                        <p>专业把关，甄选优质服务店，为车主提供优质美容洗车服务，统一定价，更高性价比。</p>
                    </section>
                    <section style="margin-bottom: 20px;">
                        <img class="bigImg" src="../assets/i/icon/show03.png" alt=""/>
                        <p class="ts">更高效</p>
                        <p>即时响应，快速上门，高效服务，为车主省时。</p>
                    </section>
                </article>
                <article data-am-widget="paragraph" class="am-paragraph am-paragraph-default">
                    <h2 class="am-text-lg">服务流程图</h2>
                    <section class="art-part">
                        <p class="tbb">一键下单</p>
                    </section>
                    <section class="down"><img class="downImg" src="../assets/i/icon/down.png" alt=""/></section>

                    <section class="art-part">
                        <p class="tbb">车管家上门</p>
                    </section>
                    <section class="down"><img class="downImg" src="../assets/i/icon/down.png" alt=""/></section>

                    <section class="art-part">
                        <p class="tbb">代为取车至附近优选店洗车</p>
                    </section>
                    <section class="down"><img class="downImg" src="../assets/i/icon/down.png" alt=""/></section>

                    <section class="art-part">
                        <p class="tbb">送车交付客户</p>
                    </section>

                </article>
            </div>
            <!-- End 服务保障 -->

            <!-- Start 用户评价 -->
            <div class="am-tab-panel " data="tab2">
                <section class="am-list-news-hd am-cf" style="background-color: #eeeeee;border-bottom: 1px solid #d2d2d2;">
                    <!--<h2>全部评价<em>好评88%</em></h2>
                    <span class="am-list-news-more am-fr">共<em>18</em>条评价</span>-->
                </section>

                <section class="am-list-news-hd am-cf" style="background-color: #eeeeee;border-bottom: 1px solid #d2d2d2;height: 40px;background-color: #FFFFFF">
                    <h2>全部评价<em>好评88%</em></h2>
                    <span class="am-list-news-more am-fr">共<em>18</em>条评价</span>
                </section>

                <section class="detail detail-next">
                    <p style="width: 100%">
                        <span class="name">喵喵落</span>
                        <span class="am-fr time2">2015-03-24  16:58</span>
                    </p>
                    <div class="star" data-star="5" style="margin: 10px 0">
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                    </div>
                    <p class="content"><span>态度服务佳！效果是亮晶晶哦！车内清洁也很细致！赞！洗完真的感觉滑滑的~~~</span></p>
                    <hr class="am-divider am-divider-default" style="margin: 15px 0;">
                    <p style="width: 100%">
                        <span class="name">喵喵落</span>
                        <span class="am-fr time2">2015-03-24  16:58</span>
                    </p>
                    <div class="star" data-star="5" style="margin: 10px 0">
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                    </div>
                    <p class="content"><span>态度服务佳！效果是亮晶晶哦！车内清洁也很细致！赞！洗完真的感觉滑滑的~~~</span></p>
                    <hr class="am-divider am-divider-default" style="margin: 15px 0;">
                    <p style="width: 100%">
                        <span class="name">喵喵落</span>
                        <span class="am-fr time2">2015-03-24  16:58</span>
                    </p>
                    <div class="star" data-star="5" style="margin: 10px 0">
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                        <i class="ui-fonts">&#xe602</i>
                    </div>
                    <p class="content"><span>态度服务佳！效果是亮晶晶哦！车内清洁也很细致！赞！洗完真的感觉滑滑的~~~</span></p>
                    <hr class="am-divider am-divider-default" style="margin: 15px 0;">
                </section>
            </div>
            <!-- End 用户评价 -->
        </div>
    </div>
</section>
<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.js" type="text/javascript"></script>
<script src="../assets/js/kuaikuai.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('button.am-btn').on('click', function() {
            window.location.href = 'around.html';
        });

        $('.star').each(function () {
            var stars = $(this).find('i.ui-fonts');
            for (var i = 0; i < $(this).data('star'); i++) {
                $(stars[i]).addClass('icon-un');
            }
        });

    });
</script>
</body>
</html>